<template>
  <div class="currency-box">
    <div class="left">
      <!-- 左边搜索 Start -->
      <header>
        <div class="search">
          <a-input
            placeholder="输入类别名称,回车搜索"
            v-model="basictypeSearch.keyWords"
            @keyup.enter="upbasictypeList"
          />
        </div>
        <div class="icon">
          <a-icon type="plus" class="icon-class" @click="basictypemodalFun" />
        </div>
      </header>

      <!-- 左边搜索 End -->

      <!-- 左边列表 Start -->

      <section
        :class="[
          'demo-infinite-container',
          basictypeList.length == 0 ? 'empty-box' : '',
        ]"
        infinite-scroll-immediate-check="false"
        infinite-scroll-listen-for-event="false"
        v-infinite-scroll="handleinfiniteOnLoad"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="20"
      >
        <a-empty v-if="basictypeList.length == 0" />
        <div v-else>
          <div
            :class="[
              'section-box',
              basictypeInfo.BasicTypeID == item.BasicTypeID
                ? 'section-active'
                : '',
            ]"
            v-for="item in basictypeList"
            :key="item.BasicTypeID"
            @click="getbasictypeInfoFun(item)"
          >
            <div class="section-box-info">
              {{ item.BasicTypeName }}({{ item.BasicTypeCode }})
            </div>
            <div
              class="section-box-tip"
              v-if="basictypeInfo.BasicTypeID == item.BasicTypeID"
            >
              <a-dropdown>
                <a-icon type="ellipsis" :rotate="90" />
                <a-menu slot="overlay">
                  <a-menu-item>
                    <span
                      @click="editbasicType(item)"
                      style="display: flex; align-items: center"
                      ><a-icon
                        type="edit"
                        style="margin-right: 0.625rem"
                      />修改</span
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <span
                      @click="deletebasicType(item)"
                      style="display: flex; align-items: center"
                    >
                      <a-icon type="delete" />删除</span
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </div>

        <a-spin v-if="basictypeLoading" class="demo-loading" />
        <!-- 左边列表 End -->
      </section>
    </div>
    <!-- 右边框架 Stratt -->
    <div class="right">
      <div class="operation-search">
        <div class="title">基础项表格</div>
        <a-form layout="inline">
          <a-form-item label="查找">
            <a-input v-model="basicSearch.KeyWords" />
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              @click="seekBasic"
              :loading="seekBasicLoading"
            >
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button class="default-button" @click="addBasic"> 添加 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button class="default-button" @click="alldelBasic">
              批量删除
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="basic-table">
        <div class="table-basic-box" id="TableBasicBox">
          <a-table
            className="components-table-demo-nested"
            :columns="basicColumns"
            :row-key="(record) => record.BasicID"
            :data-source="basicData"
            :loading="basicLoading"
            :row-selection="{
              selectedRowKeys: basicRowKeys,
              onChange: basicChangeFun,
            }"
            :customRow="rowClick"
            :rowClassName="setRowClassName"
            :scroll="{ y: tableBasicBoxNum }"
            :pagination="false"
            size="middle"
          >
            <template slot="name" slot-scope="name">
              {{ name }}
            </template>
            <template slot="action" slot-scope="text, record">
              <div class="chart-manage">
                <a-icon
                  type="edit"
                  class="icon-class"
                  @click="editBasic(record)"
                />

                <a-icon
                  type="delete"
                  class="icon-class"
                  @click="delBasic(record)"
                />
              </div>
            </template>
          </a-table>
          <div class="table-paging">
            <a-pagination
              show-size-changer
              :default-current="1"
              :total="basicTotal"
              defaultPageSize="20"
              @change="basicChange"
              @showSizeChange="basiconshowsizeChange"
            />
          </div>
        </div>
        <div class="extattrbute-table-box" id="ExtattrbuteTableBox">
          <div class="extattrbute-operation-search">
            <div class="title">附加属性</div>
            <a-form layout="inline">
              <a-form-item>
                <a-button
                  class="default-button"
                  @click="addextattriBute"
                  :disabled="currentRow.BasicTypeID ? false : true"
                >
                  添加
                </a-button>
              </a-form-item>
              <a-form-item>
                <a-button
                  class="default-button"
                  @click="alldelextattriBute"
                  :disabled="currentRow.BasicTypeID ? false : true"
                >
                  批量删除
                </a-button>
              </a-form-item>
            </a-form>
          </div>

          <a-table
            className="components-table-demo-nested"
            :columns="extattributeColumns"
            :row-key="(record) => record.ExtAttributeID"
            :data-source="extattributeList"
            :loading="extattributeLoading"
            :row-selection="{
              selectedRowKeys: extattributeRowKeys,
              onChange: extattributeChangeFun,
            }"
            :scroll="{ y: extattrbuteTableBoxNum }"
            :pagination="false"
            size="middle"
          >
            <template slot="name" slot-scope="name">
              {{ name }}
            </template>
            <template slot="action" slot-scope="text, record">
              <div class="chart-manage">
                <a-icon
                  type="edit"
                  class="icon-class"
                  @click="editextattriBute(record)"
                />
                <a-icon
                  type="delete"
                  class="icon-class"
                  @click="delextattriBute(record)"
                />
              </div>
            </template>
          </a-table>
          <!-- <div class="table-paging">
            <a-pagination show-size-changer :default-current="1" :total="basicTotal" @change="basicChange"
              @showSizeChange="basiconshowsizeChange" />
          </div> -->
        </div>
      </div>
    </div>

    <!-- 右边框架 End -->

    <!-- 基础类别 -->
    <basic-type-modal
      :show.sync="basictypeShow"
      :reviseForm="handlebasictypeInfo"
      :isEdit="basictypeisEdit"
      @break="upbasictypeList"
    ></basic-type-modal>

    <!-- 基础项 -->
    <basic-modal
      :show.sync="basicShow"
      :reviseForm="handlebasicInfo"
      :isEdit="basicisEdit"
      @break="seekBasic"
    ></basic-modal>
    <!-- 附加属性 -->
    <extattri-bute
      :show.sync="extattributeShow"
      :reviseForm="handleextattributeInfo"
      :isEdit="extattributeEdit"
      @break="getextattributeListFun"
    ></extattri-bute>
    <!-- 附加属性 -->
  </div>
</template>

<script>
import {
  GetBasicTypeList,
  DelBasicType,
  GetBasicList,
  DelBasic,
  GetExtAttributeList,
  DelExtAttribute,
} from "@/api/basic-type/index";
import BasicTypeModal from "./children/basic-type-modal.vue"; //基础类别
import BasicModal from "./children/basic-modal.vue"; //基础项
import ExtattriBute from "./children/extattribute-moda.vue"; //附加属性
import { getTableScroll } from "@/common/table-calc";
const basicColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: "10%",
  },
  {
    title: "名称",
    dataIndex: "BasicName",
    key: "BasicName",
    align: "center",
    width: "40%",
  },
  {
    title: "描述",
    dataIndex: "BasicDesc",
    key: "BasicDesc",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
]; //基础项表格表头
const extattributeColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: "10%",
  },
  {
    title: "附加属性名称",
    dataIndex: "ExtAttributeName",
    key: "ExtAttributeName",
    align: "center",
    width: "40%",
  },
  {
    title: "附加属性值",
    dataIndex: "ExtAttributeValue",
    key: "ExtAttributeValue",
    ellipsis: true,
    align: "center",
    width: "40%",
  },
  {
    title: "附加属性描述",
    dataIndex: "ExtAttributeDesc",
    key: "ExtAttributeDesc",
    ellipsis: true,
    align: "center",
    width: "40%",
  },

  {
    title: "操作",
    dataIndex: "operate",
    width: "15%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
]; //附加属性表头
export default {
  name: "BasicType",
  components: {
    BasicTypeModal,
    BasicModal,
    ExtattriBute,
  },
  data() {
    return {
      tableBasicBoxNum: 0, //基础项表格高度
      extattrbuteTableBoxNum: 0, //基础项附加属性高度
      seekBasicLoading: false, //查找基础项的按钮Loading状态控制
      basictypeList: [], //基础类别列表
      basictypeNum: "", //基础类别条数
      basictypeShow: false, //基础类别提交状态
      basictypeInfo: {}, //选中的基础类别信息
      handlebasictypeInfo: {}, //传递的基础类别信息
      basictypeisEdit: false, //判断是否修改
      basictypeLoading: false, //表格滚动到底部 Loading状态显示
      basictypeSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 100,
        },
        keyWords: "",
      }, //基础类别搜索参数
      basicSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 20,
        },
        keyWords: "",
        BasicTypeCode: "",
      }, //基础项搜索参数
      basicTotal: 0, //基础项总条数
      basicColumns, //基础项表头
      basicShow: false, //基础项Modal显示
      handlebasicInfo: {}, //基础项选中信息
      basicisEdit: false, //是否为修改基础项
      basicLoading: false, //基础项表格的Loading
      basicData: [], //基础项表格
      basicRowKeys: [], //选中的值
      basicRow: [], //选中的项
      currentRow: {}, //当前点击的基础项
      extattributeList: [], //附加属性列表
      extattributeShow: false, //附加属性状态
      handleextattributeInfo: {}, //附加属性信息载体
      extattributeEdit: false, //附加属性修改
      extattributeLoading: false, //附加属性表格Loading
      extattributeColumns, //基础项表格表头
      extattributeRowKeys: [], //选中的附加属性项ID
      extattributeRow: [], //选中的附加属性项
      busy: true, //判断是否触发到底
      rowClick: (record, index) => {
        return {
          on: {
            click: () => {
              this.currentRow = record;
              this.getextattributeListFun();
            },
          },
        };
      }, //表格点击方法
    };
  },
  methods: {
    //点击表格
    setRowClassName(record, index) {
      return record.BasicID == this.currentRow.BasicID ? "clickRowStyl" : ""; //
    },
    handleinfiniteOnLoad() {
      this.busy = true;
      setTimeout(() => {
        this.basictypeSearch.pageRequestModel.pageIndex += 1;
        this.getBasicTypeListFun();
      }, 1000);
    },

    //更新列表
    upbasictypeList() {
      this.basictypeSearch.pageRequestModel.pageIndex = 1;
      this.basictypeList = [];
      this.getBasicTypeListFun();
    },
    //获取选中基础类别信息
    getbasictypeInfoFun(value) {
      this.basictypeInfo = value;
      this.basicSearch.BasicTypeCode = value.BasicTypeCode;
      this.GetBasicListFun();
      this.currentRow = {};
      this.getextattributeListFun();
    },
    //添加基础类别方法
    basictypemodalFun() {
      this.handlebasictypeInfo = {};
      this.basictypeisEdit = false;
      this.basictypeShow = true;
    },
    //编辑基础类别方法
    editbasicType(value) {
      this.basictypeShow = true;
      this.handlebasictypeInfo = JSON.parse(JSON.stringify(value));
      this.basictypeisEdit = true;
    },
    //删除基础类别
    deletebasicType(value) {
      let that = this;
      this.$confirm({
        title: `确认要删除【${value.BasicTypeName}】嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await DelBasicType([value]);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.upbasictypeList();
          } else {
            that.$message.info(res.Data);
          }
        },
        onCancel() {},
      });
    },
    //查询基础类别
    async getBasicTypeListFun() {
      const res = await GetBasicTypeList(this.basictypeSearch);
      this.basictypeList = this.basictypeList.concat(res.Data.Data);

      if (this.basictypeList.length > 0) {
        this.basictypeInfo = this.basictypeList[0];
        let { BasicTypeCode } = this.basictypeInfo;
        this.basicSearch = {
          ...this.basicSearch,
          BasicTypeCode,
        };
        this.GetBasicListFun();
      }
      this.basictypeNum = res.Data.TotalNumber;
      if (res.Data.Data.length == 0) {
        this.busy = true;
      } else {
        this.busy = false;
      }
      this.basictypeLoading = false;
    },

    //搜索查询基本项
    seekBasic() {
      this.seekBasicLoading = true;
      this.basicSearch.pageRequestModel.pageIndex = 1;
      this.GetBasicListFun();
    },

    //查询基础项
    async GetBasicListFun() {
      const res = await GetBasicList(this.basicSearch);
      this.basicData = res.Data.Data;
      this.basicData.map((item, index) => {
        item.num = index + 1;
      });
      this.basicTotal = res.Data.TotalNumber;
      this.seekBasicLoading = false;
    },
    //添加基础项
    addBasic() {
      this.basicisEdit = false;
      this.handlebasicInfo = {
        BasicTypeID: this.basictypeInfo.BasicTypeID,
      };
      this.basicShow = true;
    },
    //修改基础项
    editBasic(value) {
      this.basicisEdit = true;
      this.handlebasicInfo = JSON.parse(JSON.stringify(value));
      this.handlebasicInfo.BasicTypeID = this.basictypeInfo.BasicTypeID;
      this.basicShow = true;
    },
    //删除基础项
    delBasic(value) {
      let that = this;
      this.$confirm({
        title: `确认要删除【${value.BasicName}】嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await DelBasic([value]);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.seekBasic();
          } else {
            that.$message.info(res.Data);
          }
        },
        onCancel() {},
      });
    },
    //批量删除
    alldelBasic() {
      if (this.basicRow.length <= 0)
        return this.$message.error("请先在表格中选中项再操作删除");
      let that = this;
      this.$confirm({
        title: `确认要删除选中【${that.basicRow.length}】项嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await DelBasic(that.basicRow);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.seekBasic();
          } else {
            that.$message.error(res.Data);
          }
        },
        onCancel() {},
      });
    },
    //基础项表格页数点击
    basicChange(page, pageSize) {
      this.basicSearch.pageRequestModel.pageIndex = page;
      this.basicSearch.pageRequestModel.pageSize = pageSize;
      this.GetBasicListFun();
    },
    //基础项条数选择
    basiconshowsizeChange(current, size) {
      this.basicSearch.pageRequestModel.pageIndex = current;
      this.basicSearch.pageRequestModel.pageSize = size;
      this.GetBasicListFun();
    },
    //基础项选中的项
    basicChangeFun(selectedRowKeys, selectedRows) {
      this.basicRow = selectedRows; //选中项信息
      this.basicRowKeys = selectedRowKeys; //选中项ID
    },
    //查询附加属性
    async getextattributeListFun() {
      this.extattributeLoading = true;
      const data = {
        TableID: this.currentRow.BasicID,
      };
      const res = await GetExtAttributeList(data);
      res.Data.map((item, index) => {
        item.num = index + 1;
      });
      this.extattributeList = res.Data;
      this.extattributeLoading = false;
    },
    //新增附加属性
    addextattriBute() {
      this.extattributeShow = true;
      this.extattributeEdit = false;
      this.handleextattributeInfo = {
        TableID: this.currentRow.BasicID,
      };
    },
    //修改附加属性
    editextattriBute(item) {
      this.extattributeShow = true;
      this.extattributeEdit = true;
      item.TableID = this.currentRow.BasicID;
      this.handleextattributeInfo = JSON.parse(JSON.stringify(item));
    },
    //基础项选中的项
    extattributeChangeFun(selectedRowKeys, selectedRows) {
      this.extattributeRow = selectedRows; //选中项信息
      this.extattributeRowKeys = selectedRowKeys; //选中项ID
    },
    //删除附加属性
    delextattriBute(value) {
      let that = this;
      this.$confirm({
        title: `确认要删除【${value.ExtAttributeName}】嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await DelExtAttribute([value]);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.getextattributeListFun();
          } else {
            that.$message.info(res.Data);
          }
        },
        onCancel() {},
      });
    },
    //批量删除附加属性
    alldelextattriBute() {
      if (this.extattributeRow.length <= 0)
        return this.$message.error("请先在附加属性表格中选中项再操作删除");
      let that = this;
      this.$confirm({
        title: `确认要删除选中【${that.extattributeRow.length}】项嘛？`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await DelExtAttribute(that.extattributeRow);
          if (res.Data == "") {
            that.$message.info("删除成功");
            that.getextattributeListFun();
          } else {
            that.$message.error(res.Data);
          }
        },
        onCancel() {},
      });
    },
  },
  created() {
    this.getBasicTypeListFun();
  },

  updated() {
    this.$nextTick(() => {
      this.tableBasicBoxNum = getTableScroll(90, "TableBasicBox");
      this.extattrbuteTableBoxNum =
        getTableScroll(40, "ExtattrbuteTableBox") - 40;
    });
  },
};
</script>

<style lang="less" scoped>
.operation-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.125rem;
  border-bottom: 2px solid #f0f2f5;
  margin-bottom: 0.9375rem;

  .title {
    font-weight: 700;
  }
}

.right-title {
  margin-bottom: 1.25rem;
}

.right-info {
  display: flex;
  margin-bottom: 1.25rem;

  .info-box {
    margin-right: 1.25rem;
  }
}

.basic-table {
  display: flex;
  flex-direction: column;
  height: calc(100% - 3.75rem);

  .table-basic-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    .ant-table-wrapper {
      flex: 3;
    }

    .table-paging {
      margin: 0.3125rem 0;
      display: flex;
      justify-content: flex-end;
    }
  }

  .extattrbute-table-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    .extattrbute-operation-search {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: 700;
        margin-bottom: 0.3125rem;
      }
    }

    .ant-table-wrapper {
      flex: 3;
    }

    .table-paging {
      margin: 0.3125rem 0;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.filter-content {
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid #f0f2f5;
}

.filter-footer {
  display: flex;
  justify-content: flex-end;

  button:nth-child(1) {
    margin-right: 0.625rem;
  }
}

/deep/ .clickRowStyl {
  background: #e6f7ff !important;
  color: #000000 !important;
}

.empty-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/deep/.ant-table-header {
  overflow-y: hidden !important;
}
</style>
